<template>
  <el-dialog title="隐患列表" v-model="showDia" width="60%" @close="onClose">
    <div class="searchBox">
      <div class="flexRow">
        <span style="width: 100px">点位名称</span>
        <el-input v-model="state.pagination.keywords"></el-input>
      </div>
      <div class="flexRow">
        <span style="width: 100px">隐患等级</span>
        <el-select v-model="state.pagination.danger_level" placeholder="请选择">
          <el-option v-for="item in state.dangerLevelOptions" :key="item" :label="item" :value="item"> </el-option>
        </el-select>
      </div>
      <div class="flexRow">
        <span style="width: 100px">隐患状态</span>
        <el-select v-model="state.pagination.status" placeholder="请选择">
          <el-option v-for="item in state.dangerStatusOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="onSearch">搜索</el-button>
      <el-button type="warning" @click="onReset">重置</el-button>
    </div>
    <div style="padding: 20px">
      <el-table :data="state.list" v-loading="state.loading">
        <el-table-column label="序号" type="index" min-width="80"></el-table-column>
        <el-table-column label="点位名称" prop="point_name" min-width="120"></el-table-column>
        <el-table-column label="隐患等级" min-width="120" prop="danger_level"></el-table-column>
        <el-table-column label="隐患位置" min-width="120" prop="address"></el-table-column>
        <el-table-column
          label="隐患来源"
          min-width="120"
          prop="service_staff"
          :formatter="hiddenDangerFrom"
        ></el-table-column>
        <el-table-column label="隐患描述" min-width="120" prop="check_remark"></el-table-column>
        <el-table-column
          label="隐患状态"
          min-width="120"
          prop="status"
          :formatter="hiddenDangerStatus"
        ></el-table-column>
        <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
        <el-table-column label="" min-width="120">
          <template #default="scope">
            <el-button size="mini" @click="checkDanger(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        background
        v-model:current-page="state.pagination.page"
        v-model:page-size="state.pagination.rows"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @current-change="getList"
        @size-change="getList"
      />
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { markList } from '@/api/flueClean'
import store from '@/store'
import { useRouter } from 'vue-router'
const useId = computed(() => {
  return store.state.user.user_info.region_id
})
const state = reactive({
  loading: false,
  pagination: {
    rows: 20,
    page: 1,
    user_info: useId,
    danger_level: '',
    keywords: '',
    point_name: '',
    status: ''
  },
  total: 0,
  list: [],
  dangerLevelOptions: ['重大隐患', '一般隐患'],
  dangerStatusOptions: [
    {
      key: 1,
      label: '未整改'
    },
    {
      key: 2,
      label: '待审核'
    },
    {
      key: 3,
      label: '已整改'
    }
  ]
})

const router = useRouter()
const checkDanger = (index, row) => {
  // if (!this.isDialog) {
  router.push({
    name: 'hiddenDangerRecord',
    query: {
      id: row.id
    }
  })
  // } else {
  //     this.$emit('showDetailDialog', row.id)
  // }
}
//搜索
const onSearch = () => {
  getList()
}
// 重置
const onReset = () => {
  let tempData = state.pagination
  for (let key in tempData) {
    if (key != 'user_info') {
      tempData[key] = ''
    }
  }
  tempData.page = 1
  tempData.rows = 20
  state.pagination = reactive(tempData)
  getList()
}

// 获取数据
const getList = async (page = 1) => {
  state.loading = true
  if (page === 1) state.pagination.page = 1
  const { data } = await markList(state.pagination).finally(() => (state.loading = false))
  state.list = data.list
  state.total = data.total
}
// 格式化
const hiddenDangerFrom = (row, column, cellValue, index) => {
  let temp = ['', '公众', '监管机构', '维保单位', '社会单位']
  return temp[row.danger_source]
}

const hiddenDangerStatus = (row, column, cellValue, index) => {
  let temp = ['', '未整改', '待审核', '已整改']
  return temp[row.status]
}
// 打开关闭
const showDia = ref(false)
const init = () => {
  showDia.value = true
  getList()
}
const onClose = () => {
  let tempData = state.pagination
  for (let key in tempData) {
    if (key != 'user_info') {
      tempData[key] = ''
    }
  }
  tempData.page = 1
  tempData.rows = 20
  state.pagination = reactive(tempData)
  showDia.value = false
}
defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.searchBox {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .flexRow {
    display: flex;
    align-items: center;
  }
}
</style>
